Skip to content

fix(emcn): stop calendar content bleeding through the modal backdrop#5311

Merged
waleedlatif1 merged 4 commits into
stagingfrom
worktree-fix-scheduled-task-modal-overlay
Jul 1, 2026
Merged

fix(emcn): stop calendar content bleeding through the modal backdrop#5311
waleedlatif1 merged 4 commits into
stagingfrom
worktree-fix-scheduled-task-modal-overlay

Conversation

@waleedlatif1

@waleedlatif1 waleedlatif1 commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • The shared modal's backdrop-blur overlay did not reliably paint above page content the browser had GPU-promoted — position: sticky headers and z-indexed absolutes inside a scroll container (e.g. the scheduled-tasks calendar's sticky day headers, toolbar chevrons, and event chips). Those composited layers sorted above the overlay despite its higher z-index, bleeding through the backdrop and over the modal panel.
  • Fix: promote both the overlay and the content wrapper to their own compositing layers via [transform:translateZ(0)], so the GPU compositor honors stacking order. Compositing hint only — no layout, spacing, z-index, focus, or event-handling change.
  • Not a regression: every ingredient (the blur overlay + the calendar's sticky/z layers) has coexisted since the calendar first shipped (feat(scheduled-tasks): calendar views + persisted, runnable tasks #4979). The emcn extraction touched these files import-only; modal.tsx is byte-identical pre/post-move.

Type of Change

  • Bug fix

Testing

Tested manually. Note: this is a GPU-compositor behavior that is hard to reproduce deterministically headless — verified the reasoning via git archaeology and the isolated repro; needs a real-Mac eyeball that (1) the bleed is gone and (2) modal text stays crisp across a couple of modals.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@waleedlatif1
fix(emcn): promote modal overlay + content wrapper to own compositing…
52145ed 
… layers

The backdrop-blur overlay did not reliably paint above page content the
browser had GPU-promoted (position: sticky headers and z-indexed absolutes
inside a scroll container, e.g. the scheduled-tasks calendar), so those
composited layers bled through the overlay despite its higher z-index.
Force the overlay and the content wrapper onto their own compositing
layers via translateZ(0) so the compositor honors stacking order.

Inherent since the calendar shipped (#4979), not a refactor regression.
@vercel

vercel Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview, Comment Jul 1, 2026 3:47am

Request Review

@cursor

cursor Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown

PR Summary

Low Risk
Import-only change in three modal files; behavior is limited to which React component backs the header icon.

Overview
Scheduled-task modals (TaskModal, TaskDetailsModal, TaskDeleteDialog) now import the Calendar glyph from @sim/emcn/icons instead of @sim/emcn, where the barrel explicitly resolves Calendar to the date-picker component.

ChipModalHeader still receives icon={Calendar}, but it is now the SVG icon rather than the full calendar grid—avoiding the wrong control being rendered in the header (and the compositing/visual issues that came with painting page-like calendar UI in the modal chrome).

Reviewed by Cursor Bugbot for commit 292891c. Bugbot is set up for automated code reviews on this repo. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR updates the shared EMCN modal layering fix. The main changes are:

  • Adds a compositing hint to the modal backdrop.
  • Adds the same hint to the fixed modal content wrapper.
  • Documents why promoted calendar layers could bleed through the blurred backdrop.

Confidence Score: 5/5

This looks safe to merge.

  • No blocking issues found in the changed code.

Important Files Changed

Filename Overview
packages/emcn/src/components/modal/modal.tsx Adds translateZ(0) compositing hints to the modal overlay and fixed content wrapper without changing modal logic, focus handling, events, or sizing.

Reviews (1): Last reviewed commit: "fix(emcn): promote modal overlay + conte..." | Re-trigger Greptile

@waleedlatif1 waleedlatif1 merged commit 44a954d into staging Jul 1, 2026
11 checks passed
@waleedlatif1 waleedlatif1 deleted the worktree-fix-scheduled-task-modal-overlay branch July 1, 2026 03:47
@waleedlatif1 waleedlatif1 mentioned this pull request Jul 1, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waleedlatif1 @TheodoreSpeaks